<template>
    <div class="box" :style="{ width: fWidth, height: fHeight, background: background }">
        <div id="main" :style="{ width: width, height: height, background: background }" ref="chart"></div>
        <div class="fonts" v-if="desc">{{ desc }}</div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myChart: {},
            option: {}
        }
    },
    props: {
        width: {
            type: String,
            default: '120px'
        },
        height: {
            type: String,
            default: '120px'
        },
        fWidth: {
            type: String,
            default: '120px'
        },
        fHeight: {
            type: String,
            default: '140px'
        },

        background: {
            type: String,
            default: '#fff'
        },
        seriesData: {
            type: Array,
            default: () => [60]
        },
        desc: {
            type: String,
            default: ""
        },
        color: {
            type: String,
            default: "#66e427"
        },
        title: {
            type: String,
            default: ""
        },
        proportion: {
            type: String,
            default: ""
        },
    },
    mounted() {
        // 初始化chart
        this.$nextTick(() => {
            // this.myChart = echarts.init(document.getElementById('main'))
            this.myChart = echarts.init(this.$refs.chart)
            this.drawChart()
        })
    },

    methods: {
        drawChart() {
            var that = this
            this.myChart.setOption({
                title: [
                    {
                        text: this.proportion,
                        x: "center",
                        top: "55%",
                        textStyle: {
                            color: "#000",
                            fontSize: "14",
                            fontWeight: "600",
                        },
                    },
                    {
                        text:this.title,
                        x: "center",
                        y: "center",
                        textStyle: {
                            fontSize: "14",
                            color: "#000",
                            foontWeight: "600",
                        },
                    },
                ],
                backgroundColor: this.background,
                polar: {
                    radius: ["80%", "62%"],
                    center: ["50%", "50%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "",
                        type: "bar",
                        roundCap: true,
                        barWidth: 40,
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(66, 66, 66, .3)",
                        },
                        data: this.seriesData,
                        coordinateSystem: "polar",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: that.color,
                                    },
                                    {
                                        offset: 1,
                                        color: that.color,
                                    },
                                ]),
                            },
                        },
                    },
                ],
            });
            this.option && this.myChart.setOption(this.option);
        }
    }
}
</script>

<style scoped>
.fonts {
    font-weight: bold;
    text-align: center;
}
</style>